<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/linqing.gif" type="image/gif">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css">
    <link rel="stylesheet" href="swiper-5.0.4/package/css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wap">
    <div class="con">
        <div class="ba">
            <div></div>
        </div>
        <div class="son">
            <div class="top">
                <div class="top-one">
                    <img src="images/ioc1.png" alt="">
                    <a href="#">
                        <b>1831108580@qq.com</b>
                    </a>
                </div>
                <div class="top-two">
                    <img src="images/name.png" alt="">
                </div>
            </div>
            <div class="content">
                <p>我的人生名言</p>
                <h2>
                    “子曰："三人行，必有我师焉；择其善者而从之，其不善者而改之。”
                    意思是：孔子说：“别人的言行举止，必定有值得我学习的地方。
                    选择别人好的学习，看到别人缺点，反省自身有没有同样的缺点，
                    如果有，加以改正。”
                </h2>
            </div>
            <div class="botton">
                <div class="botton-content">
                    <div class="s">
                        <p><b>我已经学习前端</b></p>
                        <p id="day">
                            <span id="h">00</span>天
                            <span id="m">00</span>时
                            <span id="n">00</span>分
                            <span id="s">00</span>秒</p>
                    </div>
                    <div class="y">
                        <a href="three.html" target="_blank">
                            我的求职简历<i class="fas fa-long-arrow-alt-right"></i>
                        </a>
                    </div>
                </div>
                <div class="botton-left">
                    <span id="button">
                        点<br><br>击<br>&nbsp;<br>查<br>看<br>更<br>多
                    </span>
                </div>
                <div class="botton-right">
                    <ul>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>


    <div class="main">
        <div class="one">
            <div class="style-guide">
                <h2>自我介绍（Self introduction）</h2>
                <p><b>
                    我叫胡岩肖，小小的身体里爆发着大大的能量！河北石家庄的，
                    不过在未来十年我并不打算在石家庄发展，如果可以我更想一直在杭州发展 ，
                    希望杭州温柔一些我也进取一些留给我一席之地。</b>
                </p>
            </div>
            <div class="layout">
                <div class="paragraph">
                    <div class="first">
                        <h3>我的计划（My plan）</h3>
                        <div class="first-botton">
                            <p><img src="images/sample-image.jpg" alt="">
                                在2018年秋天我接触了前端，对于前端来说入门很简单，深入却相对于前期困难。因为前端知识更新速度快需要长期不断学习，
                                会使我感到疲惫，不过19岁的我充满了大量的精力，我相信我会以饱满的状态去迎接我的专业，成功的完成我的项目，
                                我已经做好准备冲向我的公司，没有工作经验的我，很激动！
                                我也已经制定了我未来三年的工作目标，我要成为一名资深WEB前端工程师，我定制了二个阶段。
                                第一阶段为起步阶段第二阶段为提升阶段。在起步阶段我要做到：1.基本知识的掌握 2.常用工具的掌握 3.沟通技巧的掌握
                                4.良好的开发习惯 5.在团队中成为一个优秀的合作人员，并让你的团队成员喜欢你。
                               </p>
                        </div>
                        <p>&nbsp;&nbsp;在我满足了第一阶段的时候我就要进入第二阶段了：1.高级技术的掌握 2.产品管理及运营思想的学习 3.各种框架的学习
                            4.客户端应用的学习 5.各种网络协议的学习 6.程序与项目规划设计 7.各种技术在整体项目中的调配学习
                            相信我在三年里完成这些会有一定的难度，可我已经准备好战斗。期待着明天的太阳照向我!</p>
                    </div>
                </div>
                <div class="drop-caps">
                    <h3>社会实践（social practice）</h3>
                    <div class="drop-second">
                        <p>今天19岁的我已经有了很多的社会实践经历，以保证我在工作时可以和团队很好的相处并且做到绝对服从。
                        </p>
                        <br>
                        <b>
                            <p>2018年6月-9月在拼多多店家运营十几家店铺</p>
                            <p>2018年1月-2月在餐厅打工</p>
                            <p>2017年7月-9月做过推销</p>
                            <p>2016年-2017年长期兼职派发传单</p>
                            <p>2016年7-9月进过食品厂</p>
                        </b>
                        <br>
                        <br>
                    </div>
                    <h3>教育经历（Education experience）</h3>
                    <b>
                       <p>2016年-2018年 石家庄市第三职业中专学校 计算机专业</p>
                       <p>2018年-2020年 泊头职业学院 计算机专业</p>
                    </b>
                </div>
            </div>
        </div>
        <div class="two">
            <div class="column">
                <div class="on">
                    <p>姓名：<b>胡岩肖</b></p>
                    <p>我的求职方向：<b>前端开发</b></p>
                    <p>期待薪资：<b>3000-5000</b></p>
                    <p>联系电话：<b>19943473031（同微信）</b></p>
                    <p>邮箱地址：<b>1831108580@qq.com</b></p>
                </div>
                <h3>项目展示</h3>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href="http://huyanxiao.gitee.io/taobao" target="_blank">点击查看更多</a></div>
                        <div class="swiper-slide"><a href="http://huyanxiao.gitee.io/gucci" target="_blank">点击查看更多</a></div>
                        <div class="swiper-slide"><a href="http://huyanxiao.gitee.io/duitang" target="_blank">点击查看更多</a></div>
                        <div class="swiper-slide"><a href="http://huyanxiao.gitee.io/repute" target="_blank">点击查看更多</a></div>
                        <div class="swiper-slide"><a href="http://huyanxiao.gitee.io/bright_moon_knife/" target="_blank">点击查看更多</a></div>

                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>

            </div>
            <div class="column">
                <div>
                    <h3>我的目标</h3>
                    <p>
                        <a class="btn btn--primary" href="#0">就业</a>
                        <a class="btn h-full-width" href="#0">后成长</a>
                        <a class="btn btn--stroke h-full-width" href="#0">IT 人才</a>
                    </p>
                    <h3 class="bars">我的掌握情况</h3>
                    <ul class="skill-bars">
                        <li>
                            <div class="progress percent90"><span>90%</span></div>
                            <strong>HTML5</strong>
                        </li>
                        <li>
                            <div class="progress percent85"><span>85%</span></div>
                            <strong>CSS3</strong>
                        </li>
                        <li>
                            <div class="progress percent65"><span>65%</span></div>
                            <strong>JQuery</strong>
                        </li>
                        <li>
                            <div class="progress percent70"><span>70%</span></div>
                            <strong>Vue</strong>
                        </li>
                        <li>
                            <div class="progress percent85"><span>85%</span></div>
                            <strong>AJAX</strong>
                        </li>
                        <li>
                            <div class="progress percent90"><span>90%</span></div>
                            <strong>JavaScript</strong>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>


<script src="swiper-5.0.4/package/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.two .swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });


    function s() {
        var oldtime = new Date('2018/10/6 09:00:00');
        var nowtime = new Date();
        var endtime = nowtime.getTime() - oldtime.getTime();
        var one = parseInt(endtime/1000/60/60/24)
        var two = parseInt(endtime/1000/60/60%24);
        var un = parseInt(endtime/1000/60%60)
        var three = parseInt(endtime/1000%60);
        one = one <10 ? '0' + one : one;
        two = two <10 ? '0' + two : two;
        three = three <10 ? '0' + three : three;
        un = un < 10 ? '0' + un : un;
        var h = document.querySelector("#h").innerHTML = one;
        var m = document.querySelector("#m").innerHTML = two;
        var n = document.querySelector("#n").innerHTML = un;
        var s = document.querySelector("#s").innerHTML = three;
        // document.querySelector("#day").innerHTML = h +"日"+ m +"时"+ n +"分"+ s +"秒";
    }
    s()
    setInterval(s,1000)

    
    
     let button = document.querySelector("#button");
   /* button.addEventListener('click',function () {
    window.scrollTo({
        top:1000,
        behavior:'smooth'
    })
    });*/
    button.onclick = function () {
        scrollTo(0,1000);
    }


</script>
</body>
</html>